<template>
  <div class="model1">
    <div class="icon1"></div>
    <span>{{ props.title }}</span>
    <span v-if="props.value1" class="val-num">{{ props.value1 }}</span>
    <span v-if="props.value2" class="val-num">{{ props.value2 }}</span>
  </div>
</template>
<script setup lang="ts">
/** @api */
interface Props {
  title: string;
  name1?: string;
  value1?: string;
  name2?: string;
  value2?: string;
}
// 组件传参
const props = withDefaults(defineProps<Props>(), {
  title: '',
  name1: '',
  value1: '',
  name2: '',
  value2: '',
});
/** @数据 */
/** @生命周期 */
/** @方法 */
/** @侦听器 */
/** @公共方法 */
</script>
<style lang="scss" scoped>
.model1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 260px;
  height: 60px;
  box-sizing: border-box;
  padding-inline: 20px;
  border-radius: 7px;
  background: #D7B442;
  overflow: hidden;

  .icon1 {
    width: 23px;
    height: 20px;
    background: url('@/assets/imgs/icon-06.png') no-repeat;
    background-size: 23px 20px;
  }
  .val-num{
    width: 120px;
    word-wrap: break-word;
  }
}
</style>